<template>
	<view>
		<view class="information flex header">
			<view class="head-logo" @click="choosePhotot">
				<image v-if="avarShow" :src="avar" mode=""></image>
				<image v-else src="" mode=""></image>
			</view>
			<view class="">
				<view class="userName flex userWriteName" @click="updateNickName">
					<text class="writeName">请填写昵称</text>
					<view class="iconfont icon-arrow-backimg write-arrow"></view>
				</view>
				<view class="vip-ID">
					会员ID : 334554
				</view>
			</view>
		</view>
		<view class="person">
			<view class="informations flex-between">
				<view class="nickName">
					<text>手机号</text>
				</view>
				<view class="userName flex">
					<text>178***6706</text>
					<view class="iconfont icon-arrow-backimg"></view>
				</view>
			</view>
			<view class="informations flex-between">
				<view class="sex">
					<text>性别</text>
				</view>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="sex-select flex">
						<view class="uni-input">{{array[index]}}</view>
						<view class="iconfont icon-arrow-backimg"></view>
					</view>
				</picker>
			</view>
			<view class="informations flex-between">
				<view class="birthDate">
					<text>生日</text>
				</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="date-select flex">
						<view class="uni-input">{{date}}</view>
						<view class="iconfont icon-arrow-backimg"></view>
					</view>
				</picker>
			</view>
			<view class="flex-between city">
				<view class="birthDate">
					<text>城市</text>
				</view>
				<view class="userName flex btns" @tap="openAddres2">
					<text>{{pickerText}}</text>
					<view class="iconfont icon-arrow-backimg"></view>
				</view>
			</view>
		</view>
		<view class="flex-between withhold">
			<view class="birthDate">
				<text>支付扣款顺序</text>
			</view>
			<view class="userName flex btns">
				<view class="iconfont icon-arrow-backimg"></view>
			</view>
		</view>
		<view class="flex-cenetr withhold loginOut" @click="loginOut"><text>退出登录</text></view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
		<!-- 修改昵称弹窗 -->
		<view class="dialog" v-if="model">
			<input class="uni-input" type="text" placeholder="请填写昵称" @input="bindChange"/>
			<view class="save-cancle">
				<view class="cancle" @click="bindCancle">取消</view>
				<view class="save" @click="bindSave">保存</view>
			</view>
		</view>
		<view  :class="model ? 'model-bg' : 'container'"></view>
	</view>
</template>

<script>
	/** 
	 * 1、onload页面加载掉接口
	 * 2、修改信息后再次掉接口
	 * */
	import simpleAddress from '../../components/simple-address/simple-address.vue';
	export default {
		components: {
			simpleAddress
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				avar: '', // 修改后的图片路径
				avarShow: false, // true 时显示修改后的图片
				array: ['先生', '女士'],
				index: 0,
				date: currentDate,
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				model: false, //弹框
				nickName:'',//昵称
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 头像
			choosePhotot() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						console.log(res.tempFilePaths[0]); //成功则返回图片的本地文件路径列表 tempFilePaths
						uni.uploadFile({ //将本地资源上传到开发者服务器
							url: baseURL + '/api/Common/upload', //接口地址
							filePath: res.tempFilePaths[0], //图片地址
							name: 'file',
							formData: {
								access_token: uni.getStorageSync('access_token'), //加入token
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								// 上传头像接口（参数根据自己的来）
								this.$api.api.user.updateHead({
									"creator": this.$store.state.loginName, //上传者
									"headPath": "http://qapxsiqga.bkt.clouddn.com/" + data.key, // 图片最终的路径，http://qapxsiqga.bkt.clouddn.com/是七牛云空间地址
									"userId": userId
								}).then(res => {
									console.log(res)
									this.avar = "http://qapxsiqga.bkt.clouddn.com/" + data.key // 存入修改后的头像
									this.avarShow = true // 显示修改后的头像
								})
							}
						});
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			// 修改昵称
			updateNickName() {
				this.model = true;
			},
			bindChange(e){
				// console.log(e.detail.value)
				this.nickName = e.detail.value;
			},
			bindSave(e){//保存修改的昵称（非空校验）修改+查询
				if(this.nickName){
					console.log(this.nickName)
					this.model = false//弹框关闭
				}
			},
			bindCancle(){//取消按钮
				this.model =false;
			},
			// 修改性别
			bindPickerChange(e) { //0-男 1-女
				console.log(e.target.value)
				this.index = e.target.value
			},
			// 修改生日
			bindDateChange(e) {
				this.date = e.target.value
			},
			// 地区
			openAddres2() {
				// 根据 label 获取
				var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
				console.log(index);
				this.cityPickerValueDefault = index.index;
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				console.log(JSON.stringify(e))
				let array = e.labelArr;
				array.forEach((item) => {
					if (item.search('市') != -1) {
						// console.log(item)
						this.pickerText = e.label;
					}
				})
			},
			// 退出登录
			loginOut(){
				
			}
				
		}
	}
</script>

<style>
	@import url("../../common/css/iconfont.css");
	@import url("../../common/css/common.css");

	page {
		height: 100vh;
		background-color:#F0F0F0;
		font-size: MicrosoftYaHei;
	}

	.information {
		height: 180rpx;
		padding: 0 0 0 50rpx;
		border-bottom: 1px solid #9B9B9BFF;
		background-color: #FFFFFF;
	}

	.header {
		height: 198rpx;
		background: linear-gradient(181deg, #4A3D38 0%, #302B29 100%);
	}

	.head-logo {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		background-color: #2C405A;
		margin-right: 34rpx;
	}

	.writeName {
		height: 34rpx;
		font-size: 26rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 34rpx;
	}
	
	.userWriteName{
		margin-bottom: 12rpx;
	}
	.vip-ID{
		height: 30rpx;
		font-size: 22rpx;
		color: #9B9B9B;
		line-height: 30rpx;
	}
	.header .flex .write-arrow {
		font-size: 22rpx;
		margin-left: 10rpx;
		color: #fff;
	}
	.person,.city,.withhold{
		font-size: 26rpx;
		color: #302B29;
	}
	.person {
		padding: 0 32rpx 0 36rpx;
		background-color: #FFFFFF;
	}
	
	.informations {
		height: 88rpx;
		border-bottom: 1px solid #F2F2F2;
	}

	.person .city {
		height: 88rpx;
		margin-bottom: 20rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex .iconfont {
		margin-left: 20rpx;
	}

	.withhold {
		height: 100rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.withhold .birthDate {
		margin-left: 32rpx;
	}

	.withhold .btns {
		margin-right: 36rpx;
	}
	.loginOut{
		font-size: 26rpx;
		color: #E70112;
	}
	picker {
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 弹窗 */
	.dialog {
		width:674rpx;
		height: 266rpx;
		background: #F8F8F8;
		border-radius: 6rpx;
		position: absolute;
		top:380rpx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 99;
		padding:60rpx 30rpx 0;
		box-sizing: border-box;
	}
	.dialog .uni-input{
		height:72rpx;
		background: #F8F8F8;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #8E8E93;
		padding-left: 28rpx;
		background: rgba(142, 142, 147, 0.12);
		margin-bottom: 44rpx;
	}
	.save-cancle{
		display: flex;
		width: 100%;
		height: 44rpx;
		margin-left: 40rpx;
		font-size: 34rpx;
	}
	.cancle{
		color: #B7B7B7;
	}
	.save{
		color: #007AFF;
	}
	.save,.cancle{
		width: 270rpx;
		text-align: center;
		line-height: 44rpx;
	}
	.model-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		/* z-index: 9999; */
		background: #1D1E1F;
		opacity: 0.5;
	}
</style>
